import style from './index.module.less'
import { WapNav, Edit, LikeO, Search } from '@react-vant/icons'
import Menu from '@/components/Menu'
import { useState } from 'react'
import { useNavigate } from 'react-router'
//随机颜色
const randomColor = () => {
  const r = Math.floor(Math.random() * 100)+120
  const g = Math.floor(Math.random() * 100)+120
  const b = Math.floor(Math.random() * 100)+10
  return `rgb(${r},${g},${b})`
}
  const noteClassList=[
    {title:'美食',id:1},
    {title:'旅行',id:2},
    {title:'读书',id:3},
    {title:'学习',id:4},
    {title:'工作',id:5}
]
export default function NoteClass() {
  const [showMenu,setShowMenu] = useState(false)
  const navigate = useNavigate()
  const goNoteList = (title) =>{
    navigate(`/notelist?category=${title}`)
  }
  return (
    <div className={style['note-class-wrapper']}>
      <div className={[`${style['note-class']}`,`${showMenu ? style['hide'] : ''}`].join(' ')}>
        <header>
          <div onClick={()=>setShowMenu(true)}>
            <WapNav  className={style['icon']}/>
          </div>
          <div>
            <Edit className={style['icon']} onClick={()=>{navigate('/notePublish')}}/>
            <LikeO className={style['icon']}/>
            <Search className={style['icon']}/>
          </div>
        </header>
        <section>
          {
            noteClassList.map(item=>{
              return (
                <div 
                key={item.id} 
                className={style['note-class-item']} 
                style={{backgroundColor:randomColor()}}
                onClick={()=>{goNoteList(item.title)}}
                >
                  <span className={style['note-class-item-title']}>
                  {item.title}
                  </span>
                </div>
              )
            })
          }
        </section>
      </div>
      <div className={[`${style['menu']}`,`${showMenu ? style['show'] : ''}`].join(' ')}>
      <Menu setShowMenu={setShowMenu}></Menu>
      </div>
    </div>
  )
}